<template>
  <div class="leftMenus">
    <div class="menu_lay" v-show="current">
      <el-menu unique-opened :default-active="activeMenu" :collapse="isCollapse" text-color="#acb8b8"
               :collapse-transition="false" mode="vertical" class="marginBottom">
        <div v-for="item in route" :key="item.path">
          <menus-item v-if="!noMenu.includes(item.meta.title)" :item="item" :base-path="subPath(item.path)" />
        </div>
      </el-menu>
    </div>
    <!-- <div class="menus_version">苏ICP备19005896号</div> -->
  </div>
</template>

<script>
import MenusItem from "./MenusItem.vue";
import { mapState } from "vuex";

export default {
  data() {
    return {
      noMenu: [
        "站点监测",
        "充电桩监测",
        "单站监控(新)",
        "单站监控",
        "多站监控",
        "多站监控(新)"
      ],
      route: [
        {
          name: "",
          path: "/digitalTwin",
          hidden: false,
          redirect: "noRedirect",
          component: "Layout",
          alwaysShow: true,
          meta: {
            title: "数字孪生",
            icon: "system",
            noCache: false,
            link: null
          },
          isFrame: "0",
          blank: "inside",
          children: [
            {
              name: "risk",
              path: "/szls",
              hidden: false,
              outside: true,
              meta: {
                title: "数字孪生大屏",
                icon: "user",
                noCache: false,
                link: 'http://20.46.101.250:31136/digitalTwinLargescreen/#/'//'http://172.17.0.68:7070/#/digitalEcharts'//20.46.101.250:31136/digitalTwinLargesceen/#/digitalEcharts
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "risk1",
              path: "/szls1",
              hidden: false,
              outside: true,
              meta: {
                title: "数字孪生大屏1",
                icon: "user",
                noCache: false,
                link: 'http://20.46.101.250:31136/digitalTwinLargescreen/#/'//'http://172.17.0.68:7070/#/digitalEcharts'//20.46.101.250:31136/digitalTwinLargesceen/#/digitalEcharts
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "risk2",
              path: "/szls2",
              hidden: false,
              outside: true,
              meta: {
                title: "数字孪生大屏2",
                icon: "user",
                noCache: false,
                link: 'http://20.46.101.250:31136/digitalTwinLargescreen/#/'//'http://172.17.0.68:7070/#/digitalEcharts'//20.46.101.250:31136/digitalTwinLargesceen/#/digitalEcharts
              },
              isFrame: "0",
              blank: "inside"
            },
          ]
        },
        {
          name: "",
          path: "/risk",
          hidden: false,
          redirect: "noRedirect",
          component: "Layout",
          alwaysShow: true,
          meta: {
            title: "风险评估",
            icon: "system",
            noCache: false,
            link: null
          },
          isFrame: "0",
          blank: "inside",
          children: [
            {
              name: "risk",
              path: "/indicator",
              hidden: false,
              meta: {
                title: "算法指标管理",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "risk",
              path: "/riskRule",
              hidden: false,
              meta: {
                title: "引擎规则管理",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "risk",
              path: "/evaluation",
              hidden: false,
              meta: {
                title: "算法模型管理",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "risk",
              path: "/riskTask",
              hidden: false,
              meta: {
                title: "评估任务管理",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "risk",
              path: "/riskReport",
              hidden: false,
              meta: {
                title: "评估报告管理",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
          ]
        },
        //远程巡检管理
        {
          name: "inspection",
          path: "/inspection",
          hidden: false,
          redirect: "noRedirect",
          component: "Layout",
          alwaysShow: true,
          meta: {
            title: "远程巡检管理",
            icon: "system",
            noCache: false,
            link: null
          },
          isFrame: "0",
          blank: "inside",
          children: [
            {
              name: "inspection",
              path: "/configuration",
              hidden: false,
              meta: {
                title: "作业项配置",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "inspection",
              path: "/plan",
              hidden: false,
              meta: {
                title: "巡检方案管理",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "inspection",
              path: "/patro",
              hidden: false,
              meta: {
                title: "巡检任务管理",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
          ]
        },
        //
        {
          name: "analysis",
          path: "/analysis",
          hidden: false,
          redirect: "noRedirect",
          component: "Layout",
          alwaysShow: true,
          meta: {
            title: "运营分析管理",
            icon: "system",
            noCache: false,
            link: null
          },
          isFrame: "0",
          blank: "inside",
          children: [
            {
              name: "record",
              path: "/damage",
              hidden: false,
              meta: {
                title: "站损统计",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "record",
              path: "/charging",
              hidden: false,
              meta: {
                title: "有序充电",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
          ]
        },
        {
          name: "fault",
          path: "/fault",
          hidden: false,
          redirect: "noRedirect",
          component: "Layout",
          alwaysShow: true,
          meta: {
            title: "故障诊断管理",
            icon: "system",
            noCache: false,
            link: null
          },
          isFrame: "0",
          blank: "inside",
          children: [
            {
              name: "fault",
              path: "/knowledgeManagement",
              hidden: false,
              meta: {
                title: "知识库图谱管理",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "fault",
              path: "/faultManagement",
              hidden: false,
              meta: {
                title: "故障算法诊断",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            },
            {
              name: "fault",
              path: "/knowledgeBaseManagement",
              hidden: false,
              meta: {
                title: "知识库图谱数据",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            }
          ]
        },
        {
          name: "inspection",
          path: "/alarm",
          hidden: false,
          redirect: "noRedirect",
          component: "Layout",
          alwaysShow: true,
          meta: {
            title: "告警管理",
            icon: "system",
            noCache: false,
            link: null
          },
          isFrame: "0",
          blank: "inside",
          children: [
            {
              name: "record",
              path: "/alarmQuery",
              hidden: false,
              meta: {
                title: "告警查询",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            }
          ]
        },
        //日志
        {
          name: "inspection",
          path: "/record",
          hidden: false,
          redirect: "noRedirect",
          component: "Layout",
          alwaysShow: true,
          meta: {
            title: "日志管理",
            icon: "system",
            noCache: false,
            link: null
          },
          isFrame: "0",
          blank: "inside",
          children: [
            {
              name: "record",
              path: "/record",
              hidden: false,
              meta: {
                title: "操作日志",
                icon: "user",
                noCache: false,
                link: null
              },
              isFrame: "0",
              blank: "inside"
            }
          ]
        },
      ],
      opened: true,
      current: true
    };
  },
  components: {
    MenusItem
  },
  created() {
    // for (let i = 0; i < this.route.length; i++) {
      // console.log(this.route[i].meta, "title");
    // }
  },
  computed: {
    ...mapState(["route", "paths"]),
    isActive(route) {
      return route.path === this.$route.path;
    },
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
    isCollapse() {
      return !this.opened;
    }
  },

  methods: {
    //返回字节  能返回菜单栏匹配is-active的标识
    subPath(bytes) {
      const route = this.$route;
      const { meta, path } = route;
      let str = path.substr(1);
      if (str.indexOf("/") != -1) {
        return "/" + str.substring(0, str.indexOf("/") + 1) + bytes;
      } else {
        return "/" + str + "/" + bytes;
      }
    },
    menu() {
      this.current = !this.current;
      this.$emit("change", this.current);
    }
  }
};
</script>

<style lang="scss">
.leftMenus {
  position: relative;
  height: 100%;

  .right {
    position: absolute;
    top: 50%;
    margin-top: -36px;
    cursor: pointer;
    z-index: 8;
  }

  .left {
    position: absolute;
    right: -13px;
    top: 50%;
    margin-top: -36px;
    cursor: pointer;
    z-index: 8;
  }

  .el_item_parent {
    font-weight: 800;
    color: #56afbe;
    padding-left: 18px;
    font-size: 14px;
    // padding-top: 15px;
    // padding-bottom: 5px;
    // border-bottom: 1px solid #333;
  }

  .el-menu-item {
    color: #acb8b8;
    // border-bottom: 1px solid #3b4752;
  }

  .is-active {
    // background: #006172 !important;
    border: 0;
  }

  // menun菜单过长问题设置底边距
  .marginBottom {
    margin-bottom: 100px;

    .search {
      padding: 15px 0 15px 14px;
      padding-top: 15px;
      padding-bottom: 15px;
      width: 252px;
      height: 65px;
      background: #fff;
      opacity: 1;

      .el-input__prefix {
        right: 198px;
        top: 3px;
      }

      .el-input__inner {
        width: 180px;
        margin-left: 10px;
        border-radius: 4px 4px 4px 4px;
      }
    }
  }

  .menu_lay {
    position: relative;
    width: 230px;
    height: 100%;
    background: #1a2a37;
    overflow: auto;

    .menuSty {
      margin-left: 22px;

      // margin-bottom: 150px;
      b {
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 8px;
        position: relative;
        border-radius: 50%;
        background: #acb8b8;
      }
    }
  }

  .menus_version {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: #717c87;
    text-align: center;
    line-height: 40px;
    border-top: 1px solid #45596d;
    background-color: #2b3c4c;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  /*去除滚动条*/
}
</style>
